<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位相关应用</title>
</head>
<body>
<!-- 
    脱离常规流(后面的兄弟元素和祖先元素都会认为它不存在)的方式：
        浮动（之后一定要清除浮动）
        绝对定位
        固定定位
    布局网页的时候
        优先使用常规流
        再使用浮动(几个元素从纵向变成横向排列)
        最后再绝对定位（固定定位）
    
    ** 块状元素居中对齐的问题
        水平居中。
            固定宽度、水平方向margin为auto。
        水平垂直居中。
            a. 块状元素绝对定位，top和left各位50%，使用margin进行偏移。
            b. 块状元素绝对定位，top和left各位50%，使用translate进行偏移。
            c. 块状元素margin为auto，left和right一样，top和bottom一样。
    -->
</body>
</html>